<template>
  <div id="filmCarousel">
    <div class="header">
      <h3>轮播图海报管理</h3>
    </div>
    <div class="imgexhibit">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="(item, index) in poster2" :key="index">
          <img :src="item.url" v-if="item.status == 1" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="posterBtn">
      <el-button @click="uploadPoster = true" type="primary"
        >上传轮播图海报</el-button
      >
      <el-button @click="removeAll()" type="danger">删除所有海报</el-button>
    </div>
    <div class="posterTable">
      <el-table :data="Poster" height="290" border style="width: 100%">
        <el-table-column prop="createTime" label="上传时间" width="180">
        </el-table-column>
        <el-table-column prop="title" label="标题" width="100">
        </el-table-column>
        <el-table-column prop="url" width="380" label="浏览地址">
        </el-table-column>
        <el-table-column prop="status" label="上架状态">
          <!-- 上架下架 -->
          <template slot-scope="scope">
            <div class="tableStatus" v-if="scope.row.status == 1">
              <span>上架</span>
              <el-button
                size="mini"
                type="danger"
                @click="handleEdit(scope.$index, scope.row)"
                >下架</el-button
              >
            </div>
            <div class="tableStatus" v-else>
              <span>下架</span>
              <el-button
                size="mini"
                type="success"
                @click="handleEdit(scope.$index, scope.row)"
                >上架</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <!-- 删除按钮 -->
          <template slot-scope="scope">
            <div class="tableDelete">
              <el-button
                @click="removePoster(scope.$index)"
                type="danger"
                icon="el-icon-delete"
                circle
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="addDialog">
      <el-dialog title="轮播海报" :visible.sync="uploadPoster" width="770px">
        <!-- 海报标题 -->
        <div class="title">
          <span>海报标题</span>
          <el-input
            v-model="newPoster.title"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <!-- 上架状态 -->
        <div class="status">
          <span>上架状态</span>
          <el-select v-model="newPoster.status" placeholder="请选择">
            <el-option
              v-for="item in posterStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 图片上传 -->
        <div class="image">
          <span>选择图片</span>
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8888/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="newPoster.url" :src="newPoster.url" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>

        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="uploadPoster = false">取 消</el-button>
          <el-button type="primary" @click="addPoster">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getPoster,
  addPoster,
  updatePoster,
  deletePoster,
} from "@/api/admin.js";
export default {
  name: "filmCarousel",
  data() {
    return {
      Poster: [
        {
          id: "",
          title: "",
          url: "",
          status: 0,
          createTime: "",
        },
      ],
      poster2: [],
      uploadPoster: false,
      newPoster: {
        title: "",
        status: "上架",
        url: "",
      },
      posterStatus: [
        {
          value: "上架",
          label: "上架",
        },
        {
          value: "下架",
          label: "下架",
        },
      ],
    };
  },
  methods: {
    // 获取轮播图列表
    getImg: function () {
      getPoster().then((res) => {
        this.Poster = res.data;
        this.poster2 = [];
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].status == 1) {
            this.poster2 = this.poster2.concat(res.data[i]);
          }
        }
      });
    },
    // 修改轮播图信息
    handleEdit: function (index, row) {
      let sta = 0;
      if (this.Poster[index].status == 0) {
        sta = 1;
      }
      updatePoster(
        this.Poster[index].id,
        this.Poster[index].title,
        this.Poster[index].url,
        sta
      ).then((res) => {
        if (res.code === 200) {
          // 修改成功
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.Poster[index].status = sta;
          let tempPoster = [];
          for (let i = 0; i < this.Poster.length; i++) {
            if (this.Poster[i].status == 1) {
              tempPoster = tempPoster.concat(this.Poster[i]);
            }
          }
          this.poster2 = tempPoster;
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.newPoster.url = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 50;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 50MB!");
      }
      return isJPG && isLt2M;
    },
    // 添加轮播图
    addPoster: function () {
      let sta = 0;
      if (this.newPoster.status == "上架") {
        sta = 1;
      }
      addPoster(this.newPoster.title, this.newPoster.url, sta).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getImg();
          this.uploadPoster = false;
        } else {
          this.$message({
            message: "添加失败",
            type: "error",
          });
        }
      });
    },
    // 删除轮播图
    removePoster: function (id) {
      deletePoster(this.Poster[id].id).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.Poster.splice(id, 1);
          this.getImg();
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
    },
    // 删除所有轮播图
    removeAll: function () {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(this.poster2);
          for (let i = 0; i < this.poster2.length; i++) {
            let id = this.poster2[i].id;
            deletePoster(id).then((res) => {});
          }
          this.poster2 = [];
          this.Poster = [];
          this.$message({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.getImg();
  },
};
</script>

<style lang="less" scoped>
#filmCarousel {
  margin-left: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  // 头部标题
  .header {
    margin-bottom: 20px;
    h3 {
      color: #7f7f7f;
    }
  }
  // 轮播图展示
  .imgexhibit {
    .el-carousel__item img {
      width: 970px;
      height: 300px;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
  // 两个按钮
  .posterBtn {
    display: flex;
    flex-direction: row;
    .el-button {
      margin-right: 10px;
    }
    .tableStatus {
      span {
        color: aqua;
        display: block;
        margin-right: 10px;
      }
    }
  }
  .tableStatus {
    display: flex;
    flex-direction: row;
    .el-button {
      margin-left: 30px;
    }
  }
  .tableDelete {
    margin-left: 10px;
  }
  // 上传轮播图弹窗
  .addDialog {
    // 海报标题
    .title {
      margin-bottom: 20px;
      margin-left: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-input {
        width: 496px;
        margin-left: 10px;
      }
    }
    // 上架状态
    .status {
      margin-bottom: 20px;
      margin-left: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-select {
        margin-left: 10px;
      }
    }
    // 轮播图图片
    .image {
      span {
        margin-right: 10px;
      }
      margin-bottom: 20px;
      margin-left: 30px;
      display: flex;
      flex-direction: row;
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        border: 1px dashed #d9d9d9;
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        height: 178px;
        display: block;
      }
    }
  }
}
</style>